<template>
	<view class="new_page">
		<view class="main">
			<view class="form_wrap">
					<view class="div_box">
						<view class="labb">
							<text>康复中心名称</text>
						</view>
						<view class="lavv">
							<text>{{formData.name}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>品牌名称</text>
						</view>
						<view class="lavv">
							<text>{{formData.brandName}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>介绍</text>
						</view>
						<view class="lavv">
							<my-editor v-model="formData.shortdescription"></my-editor>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>地址</text>
						</view>
						<view class="lavv">
							<my-editor v-model="formData.position"></my-editor>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>活动信息</text>
						</view>
						<view class="lavv">
							<text>{{formData.discountInfo}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>联系电话</text>
						</view>
						<view class="lavv">
							<text>{{formData.phoneNumber}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>所在省份</text>
						</view>
						<view class="lavv">
							<text>{{formData.province}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>所在城市</text>
						</view>
						<view class="lavv">
							<text>{{formData.city}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>邮箱</text>
						</view>
						<view class="lavv">
							<text>{{formData.contactEmail}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>营业时间</text>
						</view>
						<view class="lavv">
							<text>{{formData.openingTime}}</text>
						</view>
					</view>

					<view class="div_box">
						<view class="labb">
							<text>标签</text>
						</view>
						<view class="lavv">
							<view class="tag_wrap" v-if="formData.tags.split(';').length > 0">
								<view :key="Math.random()" v-for="(item, index) in formData.tags.split(';')">
									<view class="tag_item">
										<uni-tag :inverted="true" :text="item" type="primary" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>微信号</text>
						</view>
						<view class="lavv">
							<text>{{formData.wechatNumber}}</text>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>店铺logo</text>
						</view>
						<view class="lavv">
							<view class="img" @click="previewImage(formData.thumbnail)">
								<image :src="formData.thumbnail" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="div_box">
						<view class="labb">
							<text>门店轮播图</text>
						</view>
						<view class="lavv">
							<view class="img_list" v-if="formData.imageList">
								<view class="img" @click="previewImage(formData.imageList,index)" v-for="(item,index) in formData.imageList.split(';')" :key="index">
									<image :src="item" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getrehabCenterDetail
	} from '@/request/api.js'

	export default {
		data() {
			return {
				isActive: false,
				formData: {
					name: "",
					brandName: "",
					shortdescription: "",
					position: "",
					phoneNumber: "",
					discountInfo: "",
					province: "",
					city: "",
					contactEmail: "",
					openingTime: "",
					tags: "",
					wechatNumber: "",
					thumbnail: "",
					imageList: "",
				},
			};
		},
		watch: {

		},
		onLoad() {
				this.getrehabCenterDetail();
		},
		mounted() {
			// uni.showModal({
			//   title: '提示',
			//   content: '是否确定提交？',
			//   success (res) {
			//     if (res.confirm) {

			//     } else if (res.cancel) {

			//     }
			//   }
			// })
		},
		methods: {
			async getrehabCenterDetail(e) {
				let res = await getrehabCenterDetail()
				if(res.code==200){
					console.log(res.data)
					this.formData = res.data
				}
			},
			previewImage(url,index=0){
				let urlArr = url.split(";");
				wx.previewImage({
				  current: urlArr[index], // 当前显示图片的http链接
				  urls: urlArr // 需要预览的图片http链接列表
				})
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.div_box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 29rpx;
		.labb {
			white-space: nowrap;
		}
		.lavv {
			width: 70%;
			.img_list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.img {
					width: 32%;
					margin-bottom: 20rpx;
				}
			}
			.img {
				width: 120rpx;
			}
		}
	}
	.tag_wrap {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;

		.tag_item {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}

	.tag_input_wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.qd_btn {
			margin-left: 20rpx;
		}
	}

	.new_page {
		width: 100%;
		margin: auto;
		// padding-bottom: 60rpx;

		.main {
			padding: 20rpx 20rpx 60rpx;
			background-color: #fff;
			// border-radius: 20rpx;
		}
	}

	.fix_btn {
		// position: fixed;
		width: 90%;
		// left: 0;
		// right: 0;
		padding: 80rpx 0;
		margin: auto;
		// bottom: 40rpx;
	}
</style>